import { Table, Button, Select, InputNumber, Space } from 'antd';
import { useState } from 'react';
import "../../css/shopping.css";

const Shopping = () => {

  const [list, setlist] = useState({
    // 口味列表
    listItem: [
      {
        name: '烤鱿鱼串',
        id: 1,
        image: 'https://i2.wp.com/telegra.ph/file/d25fc3065e4a6a043b899.jpg',
        price: 10,
        count: 1,
        checked: false,
        tolPrice: 0
      },
      {
        name: '烤羊肉串',
        id: 2,
        image: 'https://i2.wp.com/telegra.ph/file/8022385c2562b2aef701e.jpg',
        price: 15,
        count: 1,
        checked: false,
        tolPrice: 0
      },
      {
        name: '烤韭菜',
        id: 3,
        image: 'https://i2.wp.com/telegra.ph/file/a7089d6bd6d734db9ce41.jpg',
        price: 3,
        count: 1,
        checked: false,
        tolPrice: 0
      },
      {
        name: '烤五花肉串',
        id: 4,
        image: 'https://i1.wp.com/telegra.ph/file/317429a98c997d7ae523c.jpg',
        price: 13,
        count: 1,
        checked: false,
        tolPrice: 0
      },
    ],

  })

  const [softDrink, setsoftDrink] = useState({
    // 下拉框
    softDrink: [
      {
        value: '果汁橙',
        label: '果汁橙',
      },
      {
        value: '芬达',
        label: '芬达',
      },
      {
        value: '雪碧',
        label: '雪碧',
      },
      {
        value: '可乐',
        label: '可乐',
      },
      {
        value: '健力宝',
        label: '健力宝',
      },
      {
        value: '王老吉',
        label: '王老吉',
      },
      {
        value: '加多宝',
        label: '加多宝',
      },
      {
        value: '燕京',
        label: '燕京',
      },
      {
        value: '纯生',
        label: '纯生',
      },
      {
        value: '珠江零度',
        label: '珠江零度',
      },
      {
        value: '菠萝啤',
        label: '菠萝啤',
      },
    ]
  })

  // 下拉框的事件
  const onChange = (value) => {
    console.log('changed', value);
  };

  // 份数
  let onChange2 = (index, value) => {
    // console.log(value);
    let nList = [...list.listItem]
    nList[index].price = nList[index].price * parseInt(value)
    setlist(() => {
      return {
      ...list,
      listItem:nList
      }
    })
    console.log('====',list.listItem[index].price )
  }

  // 单删
  let del = (key) => {
    // console.log(key);
    list.list.splice(key, 1)
    setlist({
      ...list,
      list: list.list
    })
  }


  // 表格头部
  const columns = [
    {
      title: '口味必选',
      dataIndex: 'name',
    },
    {
      title: '烧烤图片',
      dataIndex: 'image',
      render: (image) => {
        return (
          <>
            <img className='img' src={image} alt="" />
          </>
        )
      }
    },
    {
      title: '免费配送选畅饮',
      dataIndex: 'drink',
      render: () => {
        return (
          <>
            {/* 下拉框 */}
            <Select
              defaultValue="果汁橙"
              style={{
                width: 120,
              }}
              onChange={onChange}
              options={softDrink.softDrink}>
            </Select>

          </>
        )
      }
    },
    {
      title: '价格',
      dataIndex: 'price',
    },
    {
      title: '份数',
      dataIndex: 'count',
      render: (count, { key }) => {
        return (
          <>
            <Space>
              <InputNumber min={0} max={100000} defaultValue={count} onChange={() => onChange2(key, count)} />
            </Space>
          </>
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'address',
      render: (index, key) => {
        // console.log(index,key);
        return (
          <>
            <Button type="primary" danger onClick={() => del(key.key)}>删除</Button>
          </>
        )
      }
    },
  ];


  // 循环的表格数据
  const data = [];
  list.listItem.map((item, index) => {
    // console.log(item);
    data.push({
      key: index,
      name: `${item.name}`,
      image: `${item.image}`,
      price: `￥${item.price}`,
      count: `${item.count}`,
    });
  })


  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  return (
    <>
      <Table bordered rowSelection={rowSelection} columns={columns} dataSource={data} />
      <div>
        <Button type="primary">提交</Button>
      </div>
    </>
  );
}

export default Shopping;